<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h2>仪表盘</h2>
      <p>欢迎使用RBAC权限管理系统</p>
    </div>
    
    <div class="stats-cards">
      <t-row :gutter="16">
        <t-col :span="6">
          <t-card title="用户总数" bordered>
            <template #actions>
              <t-button variant="text">
                <template #icon>
                  <t-icon name="user" />
                </template>
              </t-button>
            </template>
            <div class="stat-number">1,234</div>
            <div class="stat-desc">较上月增长 12%</div>
          </t-card>
        </t-col>
        
        <t-col :span="6">
          <t-card title="角色数量" bordered>
            <template #actions>
              <t-button variant="text">
                <template #icon>
                  <t-icon name="usergroup" />
                </template>
              </t-button>
            </template>
            <div class="stat-number">56</div>
            <div class="stat-desc">系统角色</div>
          </t-card>
        </t-col>
        
        <t-col :span="6">
          <t-card title="权限数量" bordered>
            <template #actions>
              <t-button variant="text">
                <template #icon>
                  <t-icon name="permissions" />
                </template>
              </t-button>
            </template>
            <div class="stat-number">128</div>
            <div class="stat-desc">权限节点</div>
          </t-card>
        </t-col>
        
        <t-col :span="6">
          <t-card title="在线用户" bordered>
            <template #actions>
              <t-button variant="text">
                <template #icon>
                  <t-icon name="eye" />
                </template>
              </t-button>
            </template>
            <div class="stat-number">89</div>
            <div class="stat-desc">当前在线</div>
          </t-card>
        </t-col>
      </t-row>
    </div>
    
    <div class="dashboard-content">
      <t-row :gutter="16">
        <t-col :span="16">
          <t-card title="最近活动" bordered>
            <t-list>
              <t-list-item>
                <template #content>
                  <div class="activity-item">
                    <span class="activity-time">10:30</span>
                    <span class="activity-text">管理员创建了新用户</span>
                  </div>
                </template>
              </t-list-item>
              <t-list-item>
                <template #content>
                  <div class="activity-item">
                    <span class="activity-time">09:15</span>
                    <span class="activity-text">用户张三修改了个人信息</span>
                  </div>
                </template>
              </t-list-item>
              <t-list-item>
                <template #content>
                  <div class="activity-item">
                    <span class="activity-time">昨天 16:45</span>
                    <span class="activity-text">新增了管理员角色</span>
                  </div>
                </template>
              </t-list-item>
            </t-list>
          </t-card>
        </t-col>
        
        <t-col :span="8">
          <t-card title="快速操作" bordered>
            <t-space direction="vertical" style="width: 100%">
              <t-button block @click="$router.push('/users/add')">
                <template #icon>
                  <t-icon name="user-add" />
                </template>
                添加用户
              </t-button>
              <t-button block @click="$router.push('/roles/add')">
                <template #icon>
                  <t-icon name="usergroup-add" />
                </template>
                添加角色
              </t-button>
              <t-button block @click="$router.push('/permissions/add')">
                <template #icon>
                  <t-icon name="permissions-add" />
                </template>
                添加权限
              </t-button>
            </t-space>
          </t-card>
        </t-col>
      </t-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.dashboard-header {
  margin-bottom: 24px;
}

.dashboard-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.dashboard-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.stats-cards {
  margin-bottom: 24px;
}

.stat-number {
  font-size: 32px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.stat-desc {
  color: #666;
  font-size: 14px;
}

.dashboard-content {
  margin-top: 24px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.activity-time {
  color: #999;
  font-size: 12px;
  min-width: 60px;
}

.activity-text {
  color: #333;
}
</style>